<template>
  <div>
    <div class="headerback">
      <div class="backImg">
        <img :src="profile.backgroundUrl + '?param=200y200'" alt="" />
      </div>
      <div class="return" @click="$router.go(-1)">
        <span class="iconfont icon-arrow-left-bold"></span>
        <span>{{ profile.nickname }}</span>
      </div>
    </div>

    <!-- 用户信息 -->
    <div class="userbox">
      <div class="userImg">
        <img :src="profile.avatarUrl + '?param=50y50'" alt="" />
      </div>
      <div class="userData">
        <div class="data">
          <ul>
            <li>
              <p>{{ profile.followeds }}</p>
              <p>粉丝</p>
            </li>
            <li>
              <p>{{ profile.follows }}</p>
              <p>关注</p>
            </li>
            <li>
              <p>Lv.{{ level }}</p>
              <p>等级</p>
            </li>
          </ul>
          <div class="btn">
            <router-link tag="button" to="/updata">编辑信息</router-link>
          </div>
        </div>
      </div>
      <div class="title">{{ profile.signature }}</div>
    </div>

    <!-- 喜欢歌单 -->
    <div class="collection">
      <h3>喜欢的歌单</h3>
      <ul>
        <li @click="getId(favorite.id)">
          <div class="Img">
            <img :src="favorite.coverImgUrl" alt="" />
          </div>
          <div class="text">
            <p>{{ favorite.name }}</p>
            <p>
              <span>{{ favorite.trackCount }}首</span>
            </p>
          </div>
        </li>
      </ul>
    </div>

    <!-- 创建歌单 -->
    <div class="collection">
      <h3>创建的歌单（{{ CreatePlaylist.length }}）</h3>
      <ul>
        <li
          v-for="(item, index) in CreatePlaylist"
          :key="index"
          @click="getId(item.id)"
        >
          <div class="Img">
            <img :src="item.coverImgUrl" alt="" />
          </div>
          <div class="text">
            <p>{{ item.name }}</p>
            <p>
              <span>{{ item.trackCount }}首</span>
            </p>
          </div>
        </li>
      </ul>
    </div>

    <!-- 收藏歌单 -->
    <div class="collection">
      <h3>收藏的歌单（{{ playlist.length }}）</h3>
      <ul>
        <li
          v-for="(item, index) in playlist"
          :key="index"
          @click="getId(item.id)"
        >
          <div class="Img">
            <img :src="item.coverImgUrl" alt="" />
          </div>
          <div class="text">
            <p>{{ item.name }}</p>
            <p>
              <span>{{ item.trackCount }}首，</span>
              <span class="nickname">{{ item.creator.nickname }}，</span>
              <span>播放{{ item.subscribedCount }}次</span>
            </p>
          </div>
        </li>
      </ul>
    </div>

    <div class="quitBtn">
      <button @click="quitLogin">退出登录</button>
    </div>
  </div>
</template>

<script>
import { getUser, getPlaylist } from "../../api/userInfo";

export default {
  data() {
    return {
      profile: [],
      level: 0,
      playlist: [], // 收藏歌单
      CreatePlaylist: [], // 创建歌单
      favorite:[], // 喜欢歌单
    };
  },
  methods: {
    getId(id) {
      console.log(id);
      this.$router.push({
        path: "/recommend/musiclist",
        query: { id },
      });
    },
    getUserFun() {
      getUser({ uid: this.$store.state.userId }).then((data) => {
        this.profile = data.profile;
        this.level = data.level;
        this.listenSongs = data.listenSongs;
      });
    },
    getPlaylistFun() {
      getPlaylist({ uid: this.$store.state.userId }).then((data) => {
        // 创建的歌单
        let CreatePlaylist = data.playlist.filter((currentValue) => {
          return currentValue.userId == this.$store.state.userId;
        });
        CreatePlaylist.forEach((item,index) => {
          if(index == 0){
            this.favorite = item
          }else{
            this.CreatePlaylist.push(item)
          }
        });

        // 收藏的歌单
        let playlist = data.playlist.filter((currentValue) => {
          return currentValue.userId != this.$store.state.userId;
        });
        this.playlist = playlist;
      });
    },
    // 退出登录
    quitLogin() {
      this.$store.commit("getUserId", null);
      this.$store.commit("setLogin", false);
      this.$router.push("/login2");
      this.$store.commit("musicDatafun","")
    },
  },
  created() {
    this.getUserFun();
    this.getPlaylistFun();
  },
  // computed: {
  //   userid() {
  //     return this.$store.state.userId;
  //   },
  // },
};
</script>

<style lang="less">
.quitBtn {
  button {
    display: block;
    outline: none;
    width: 94%;
    margin: 0 auto;
    padding: 10px;
    font-size: 18px;
    background: #d4473c;
    color: #fff;
    border: none;
  }
}

.collection {
  background: #fff;
  margin: 10px;
  border-radius: 10px;
  h3 {
    font-size: 18px;
    padding: 10px 0 0 10px;
  }
  ul {
    li {
      overflow: hidden;
      padding: 10px;
      // height: 140px;
      .Img {
        float: left;
        width: 50px;
        height: 50px;
        border-radius: 10px;
        overflow: hidden;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        float: left;
        font-size: 14px;
        p {
          margin: 0px;
          line-height: 26px;
          span {
            display: block;
            float: left;
          }
          .nickname {
            line-height: 26px;
            max-width: 130px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
        }
      }
    }
  }
}

body {
  background: #f4f4f4;
}
.userbox {
  position: relative;
  //   top: -60px;
  margin-top: -60px;
  overflow: hidden;
  padding: 10px 30px;
  background: linear-gradient(rgba(244, 244, 244, 0), rgb(244, 244, 244, 1));
  .userImg {
    float: left;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .userData {
    float: right;
    .data {
      ul {
        li {
          width: 70px;
          text-align: center;
          float: left;
          font-size: 14px;
          color: #fff;
          p{
            margin: 0px;
          }
        }
      }
    }
    .btn {
      button {
        width: 100%;
        margin-top: 10px;
        padding: 5px 0;
        outline: none;
        font-size: 16px;
        border: 1px solid #d4d4d4;
        background: #f4f4f4;
        border-radius: 20px;
      }
    }
  }
  .title {
    clear: both;
    font-size: 14px;
    line-height: 26px;
  }
}

.headerback {
  position: relative;
  .backImg {
    height: 300px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .return {
    width: 220px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 18px;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    padding-left: 10px;
    .iconfont {
      margin-right: 10px;
    }
  }
}
</style>
